<template>
  <div
    class="more-btn f f-ac f-jc"
    @mouseenter="arrowShow = true"
    @mouseleave="arrowShow = false"
    @click="handleClick"
  >
    {{ text }}
    <div
      v-if="arrow"
      class="arrow-right"
      :style="{
        width: arrowShow ? '20px' : '0',
        marginLeft: arrowShow ? '10px' : '0',
      }"
    >
      →
    </div>
  </div>
</template>
<script lang="ts" setup>
defineProps({
  // 按钮文字
  text: {
    type: String,
    default: "了解更多",
  },
  // 是否显示箭头
  arrow: {
    type: Boolean,
    default: true,
  },
});
const arrowShow = ref<boolean>(false);
const emit = defineEmits(["click"]);

// 点击事件
const handleClick = () => {
  emit("click");
};
</script>
<style lang="scss" scoped>
.more-btn {
  width: 190px;
  height: 53px;
  color: #fff;
  font-size: 18px;
  z-index: 4;
  background: url("@/assets/home/carousel-btn.png") no-repeat;
  background-size: 100% 100%;
  transition: all 0.5s;
  &:hover {
    cursor: pointer;
    background: url("@/assets/home/carousel-btn-active.png") no-repeat;
    background-size: 100% 100%;
  }
  .arrow-right {
    transition: all 0.3s;
    font-weight: 600;
    overflow: hidden;
  }
}
</style>
